﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/knockout-1.2.1.js" type="text/javascript"></script>
    <script src="services/EventLookUpService.js" type="text/javascript"></script>
    <script src="js/dishdash.widgetconfiguration.js" type="text/javascript"></script>
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Dish Dash</a>
                <ul class="nav">
                    <li class="active"><a href="#">Add or Edit a Widget</a></li>
                </ul>
            </div>
        </div>
    </div>
     <div id="Add Widget" style="visibility: visible">
     
      <form class="span8">
        <fieldset>
            <legend>Add Widget</legend>
            <div class="control-group">
                <label class="control-label">Widget Name
                    </label>
                <div class="controls">
                    <input id="Widget Name" type="text" class="input-xlarge" />
                </div>
            </div>
            <div style="border-width:2px; border-style:solid; border-color:#dddddd;padding:10px 20px 10px 20px">      
             
                <div class="control-group">
                    <label class="accordion-heading" style="font-weight:bold;">
                        Select Event to Instrument
                    </label>
                        
                    <div class="form-actions">
                        <label class="control-label">
                            Categories
                        </label>
                        <div class="controls">
                            <select id="Select1" ></select>                
                        </div>   

                        <label class="control-label">
                            Measurement
                        </label>
                        <div class="controls">
                            <select id="Measurement" data-bind="options: measurementValues" ></select>      
                            <span style="padding-left:10px;padding-top:10px;">
                                <button class="btn btn-primary" onclick="addWidget();">+</button>          
                            </span>
                        </div>                
                    </div>
                    <table class="table" >                        
                        <thead>
                            <tr>
                                <th>Category</th><th>Measurement</th>
                            </tr>                        
                        </thead>
                        <tbody>
                            <tr>
                                <td>df</td>
                                <td>dfds</td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
                                    
            </div>

            <div class="control-group">
                <label class="control-label">
                    Sampling Period</label>
                <div class="controls">
                    <select id="Sampling Period" data-bind="options: samplingPeriodValues" ></select>                
                </div>                
            </div>

            <div class="control-group">
                <label class="control-label">
                    Precisions</label>
                <div class="controls">
                    <select id="Precision" data-bind="options: precisionValues" ></select>                
                </div>                
            </div>

            <div class="control-group">
                <label class="control-label">
                    Refresh Time</label>
                <div class="controls">
                    <select id="Refresh Time" data-bind="options: refreshTimeValues" ></select>                
                </div>                
            </div>                                  

        </fieldset>
        </form>
    </div>
    <div class="span6">
    
        <button id="AddButton" class="btn btn-primary" onclick="addWidget();">Add Widget</button>
        <button id="SaveButton" class="btn btn-primary" onclick="addWidget();">Save Widget</button>
        <button class="btn btn-primary" onclick="cancel();">
            Cancel</button>
    </div>
   

    <script type="text/javascript">

        if (typeof (Storage) !== "undefined") {
            // Browser does support local storage
        }
        else {
            // No local storage support
            alert("Your browser does NOT support local storage. Any changes to the Dish Dash configuration will not be saved between browser sessions.");
        }

        function checkAddOrEditWidget() {
            var existingOrNewWidget = getURLParameter("WidgetName");

            if (existingOrNewWidget != null) {
                var editWidget = dishdash.widgetconfiguration.getAWidget(existingOrNewWidget);
                if (editWidget != null) {
                    document.getElementById("Widget Name").value = editWidget.widgetName;
                    document.getElementById("Measurement").selectedIndex = getMeasurementValueIndex(editWidget.measurement);
                    document.getElementById("Sampling Period").selectedIndex = getSamplingValueIndex(editWidget.samplePeriod);
                    document.getElementById("Precision").selectedIndex = getPrecisionValueIndex(editWidget.precision);
                    document.getElementById("Refresh Time").selectedIndex = getRefreshValueIndex(editWidget.refreshPeriod);
                }
                else {
                    alert("Error retrieving widget configuration from local storage");        
                }
            }
        }

        function getMeasurementValueIndex(strMeasurement) {
            for (var i = 0; i < viewModel.lookUpValues.Measurements.length; i++) {
                if (viewModel.lookUpValues.Measurements[i] === strMeasurement) {
                    return i;
                }
            }
        }

        function getSamplingValueIndex(strSampling) {
            for (var i = 0; i < viewModel.lookUpValues.SamplingPeriodInSeconds.length; i++) {
                if (viewModel.lookUpValues.SamplingPeriodInSeconds[i] === strSampling) {
                    return i;
                }
            }
        }

        function getPrecisionValueIndex(strPrecision){
            for (var i = 0; i < viewModel.lookUpValues.Precisions.length; i++)
            {
                if (viewModel.lookUpValues.Precisions[i] === strPrecision)
                {
                    return i;
                }
            }
        }

        function getRefreshValueIndex(strRefresh) {
            for (var i = 0; i < viewModel.lookUpValues.RefreshTimeInSeconds.length; i++) {
                if (viewModel.lookUpValues.RefreshTimeInSeconds[i] === strRefresh) {
                    return i;
                }
            }
        }

        function getURLParameter(strParamName) {
            var strReturn = "";
            var strHref = window.location.href;

            if (strHref.indexOf("?") < 0) {
                return;
            }

            if (strHref.indexOf("?") > -1) {
                var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
                var aQueryString = strQueryString.split("&");
                for (var iParam = 0; iParam < aQueryString.length; iParam++) {
                    if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1) {
                        var aParam = aQueryString[iParam].split("=");
                        strReturn = aParam[1];
                        break;
                    }
                }
            }
            return unescape(strReturn);
        }

        addWidget = function () {
            try {
                //If localStorage supports with the browser
                if (localStorage) {

                    var cat1 = new Array();
                    //cat1.push("ProfilingApp.Handlers.SecurityHandler.CreateCustomerResponse");

                    var w = new dishdash.widgetconfiguration.Widget();

                    w.widgetName = document.getElementById("Widget Name").value;
                    //w.categories = document.getElementById("Event").value;
                    w.categories = cat1;
                   //w.measurement = document.getElementById("Measurement").value;
                    w.samplePeriod = document.getElementById("Sampling Period").value;
                    w.precision = document.getElementById("Precision").value;
                    w.refreshPeriod = document.getElementById("Refresh Time").value;
                    dishdash.widgetconfiguration.saveAWidget(w);
                    alert("The follow widget has been successfully added: " + "\n" +
                        "Widget Name: " + "\"" + w.widgetName + "\"" + "\n" +
                        "\t" + "- Sampling Period: " + w.samplePeriod + "\n" +
                        "\t" + "- Precision: " + w.precision + "\n" +
                        "\t" + "- Refresh Period: " + w.refreshPeriod + " Second(s)"
                        );
                    window.close();
                }
            }
            catch (err) {
                alert(err.Description);
            }
        };

        cancel = function () {
            window.close();
        };

        var viewModel = {
            lookUpValues: new Array(),
            widgetName: ko.observable(),
            measurementValues: ko.observableArray([]),
            precisionValues: ko.observableArray([]),
            samplingPeriodValues: ko.observableArray([]),
            refreshTimeValues: ko.observableArray([]),

            service: new dishdash.services.eventLookUpService(),

            getLookups: function () {
                service = new dishdash.services.eventLookUpService();
                service.GetAllLookUps(viewModel.getLookUpsCallback);
            },

            getLookUpsCallback: function (response) {
                viewModel.lookUpValues = response;
                viewModel.measurementValues(response.Measurements);
                viewModel.measurementValues.splice(0, 0, "");
                document.getElementById("Measurement").selectedIndex = 0;
                viewModel.samplingPeriodValues(response.SamplingPeriodInSeconds);
                viewModel.samplingPeriodValues.splice(0, 0, "");
                document.getElementById("Sampling Period").selectedIndex = 0;
                viewModel.precisionValues(response.Precisions);
                viewModel.precisionValues.splice(0, 0, "");
                document.getElementById("Precision").selectedIndex = 0;
                viewModel.refreshTimeValues(response.RefreshTimeInSeconds);
                viewModel.refreshTimeValues.splice(0, 0, "");
                document.getElementById("Refresh Time").selectedIndex = 0;
                checkAddOrEditWidget();
            }
        };

        viewModel.getLookups();

        ko.applyBindings(viewModel);  
                     
    </script>
</body>
</html>
